<template>
<div>
  <div class="search">  
    <input v-model="keyword" type="text" class="search-input" placeholder="输入城市名或拼音" />
  </div>
  <div class="search-content" v-show="keyword">
    <ul>
      <li v-for="item in list" class="border-bottom search-item" @click="handleClick(item.name)">{{item.name}}</li>
      <li v-show="ifnodata">没有找到匹配项</li>
    </ul>
  </div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch' ,
  props  :{
   cities:Object  
  },
  data () {
    return {
      keyword:'',
      list:[],
      timer:null
    }
  },
  mounted () {    
   // this.scroll = new BScroll(this.$refs.search-content)
    const list = document.querySelector('.search-content')
    const scroll = new BScroll(list)
  },
  computed:{
     ifnodata () {      
       return ! this.list.length
     }
  },
  methods:{
    handleClick(city){
      this.$store.dispatch('changeCity',city);
      this.$router.replace('/')
    }
  },
  watch:{
    keyword (){
      if(this.timer){
         clearTimeout(this.timer)
      }
      this.timer = setTimeout(() =>{
         const result = []
         for (let i in this.cities){
           this.cities[i].forEach((value) =>{
              if(value.spell.indexOf(this.keyword) > -1||value.name.indexOf(this.keyword) > -1){
                result.push(value)
              }
           })
         }
         this.list = result
      },100)
    }
  }
}
</script>
<style lang="stylus" scoped>
 @import '~@/assets/styles/varibles.styl'
 .search
  height:.72rem
  padding:0.1rem
  background:$bgColor
  .search-input
   box-sizing:border-box
   width:100%
   height:.62rem
   padding:0.1rem
   text-align:center
   background:#fff;
   color:#666
   font-size:0.22rem
 .search-content
  position:absolute
  overflow:hidden
  top:1.66rem
  z-index:1
  left:0
  right:0
  bottom:0
  width:100%
  background:#eee
  .search-item
   line-height:.62rem
   color:#666;
   padding-left:0.2rem
   background:#fff
</style>
